<template>
  <div class="commentBlock">
    <commentItem
      :parent="parent.parent"
      v-if="parent.parent"
      @repalyComment="sendcomment"
    ></commentItem>
    <div class="heaed">
      <div class="left">
        <p>{{ parent.user.nickname }}</p>
        <span>{{ parent.create_date | getMoment }}</span>
      </div>
      <!-- 点击子组件回复触发父组件 需要传入当前的评论数对象参数 -->
      <div class="right" @click="clickreplay(parent)">回复</div>
    </div>
    <!-- 在这里我们复用组件  因为我们知道下面还有多少个parent 出口是v-if 没有 parent.parent -->
    <div class="text">{{ parent.content }}</div>
  </div>
</template>

<script>
// 引入 moment过滤器
import { getMoment } from "@/filter/myfilter";
// import moment from "moment";
export default {
  // 传入parent值
  props: ["parent"],
  //组件递归的写法，声明一个name
  name: "commentItem",
  filters: {
    getMoment,
  },
  methods: {
    // 点击回复 子传父 把当前用户id
    sendcomment(v) {
      this.$emit("repalyComment", v);
    },
    //
    clickreplay(parent) {
      this.$emit("repalyComment", parent);
    },
  },
};
</script>

<style lang="less" scoped>
.commentBlock {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  //   height: 100px;
  border: 1px solid #ccc;
  .heaed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    > p {
      font-size: 16px;
      font-weight: 400;
    }
    > span {
      margin-left: 5px;
      font-size: 13px;
      color: #999;
    }
  }
  .right {
    font-size: 13px;
    color: #999;
  }
  .text {
    margin-top: 20px;
    font-size: 14px;
    color: #333;
  }
}
</style>